/*基金-基金基础页面 path: '/stockbase'*/
<template>
  <div class="stock-base common-stock-trade">
    <header-top :option="headerOption"></header-top>
    <div class="level-one-title">
      <img src="~assets/images/trade/jichu@2x.png">炒股基础篇
    </div>
    <div class="title-list">
      <div class="level-two-title" v-for="(item,index) in list1" @click.stop.prevent="clickTitle(item)">
        {{item.title}}<i class="iconfont icon-xiangyou"></i>
      </div>
    </div>
    <div class="level-one-title">
      <img src="~assets/images/trade/mingci@2x.png">名称解释篇
    </div>
    <div class="title-list">
      <div class="level-two-title" v-for="(item,index) in list2" @click.stop.prevent="clickTitle(item)">
        {{item.title}}<i class="iconfont icon-xiangyou"></i>
      </div>
    </div>
    <div class="blank"></div>
  </div>
</template>

<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'

  export default {
    data () {
      return {
        headerOption: {
          title: '炒股基础',
          leftBtn: Constant.leftBtn.BACK,
          operations: [],
        },
        list1:[
          {title:'什么是股票',textIndex:1.1},
          {title:'什么是组合',textIndex:1.2},
          {title:'股票交易规则',textIndex:1.3},
          {title:'股票交易时间',textIndex:1.4},
          {title:'股票交易单位',textIndex:1.5},
          {title:'市价委托和限价委托',textIndex:1.6},
          {title:'炒股基础财务知识',textIndex:1.7},
          {title:'转入实盘炒股前应做哪些准备',textIndex:1.8}
        ],
        list2:[
          {title:'挂牌，摘牌，停牌',textIndex:2.1},
          {title:'涨停股和跌停股',textIndex:2.2},
          {title:'“ST”和“*ST”股',textIndex:2.3},
          {title:'什么是无效委托',textIndex:2.4},
          {title:'换手率、市盈率和流通股本',textIndex:2.5},
          {title:'买卖档和庄家',textIndex:2.6}
        ]
      }
    },
    components: {
      HeaderTop
    },
    methods:{
      clickTitle(item){
        console.log(item)
       this.$router.push({path:'/stockbasedetail',query:{title:item.title,textIndex:item.textIndex}})
      }
    }
  }
</script>

<style scoped>
  .level-one-title{
    text-align: center;
    color:#EC5050;
    font-size: 24px;
    padding:9px 0 15px;
  }
  .level-one-title > img{
    height: 59px;
    margin-right: 16px;
  }
  .level-two-title{
    background: #FFFFFF;
    color: #4E4E4E;
    font-size: 14px;
    border-bottom: 1px solid #E7E7E7;
    padding: 0 27px 0 22px;
    height: 58px;
    line-height: 58px;
  }
  .level-two-title > i{
    color: #BDBDBD;
    font-size: 20px;
    float: right;
  }
  .title-list .level-two-title:last-child{
    border-bottom:none;
  }
  .blank{
    height: 58px;
  }
</style>
